<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运营数据</title>
    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../vendor/chart.js/Chart.min.css">
    <link rel="stylesheet" href="../css/ui365-pro.css">
</head>

<body class="p-3">
    <h4 class="ml-1">运营数据</h4>
    <div class="d-flex" title="图标模式模式">
        <div class="d-flex flex-fill border m-1">
            <div class="icon p-3 text-white bg-primary">
                <i class="fa fa-users" style="font-size:30px"></i>
            </div>
            <div class="mx-3 align-self-center">
                <h6 class="mb-1">虚位以待</h6>
                <a href="#" class="card-link">0</a> 元
            </div>
        </div>
        <div class="d-flex flex-fill border m-1">
            <div class="icon p-3 text-white bg-success">
                <i class="fa fa-users" style="font-size:30px"></i>
            </div>
            <div class="mx-3 align-self-center">
                <h6 class="mb-1">虚位以待</h6>
                <a href="#" class="card-link">0</a> 元
            </div>
        </div>
        <div class="d-flex flex-fill border m-1">
            <div class="icon p-3 text-white bg-info">
                <i class="fa fa-users" style="font-size:30px"></i>
            </div>
            <div class="mx-3 align-self-center">
                <h6 class="mb-1">虚位以待</h6>
                <a href="#" class="card-link">0</a> 元
            </div>
        </div>
        <div class="d-flex flex-fill border m-1">
            <div class="icon p-3 text-white bg-black">
                <i class="fa fa-users" style="font-size:30px"></i>
            </div>
            <div class="mx-3 align-self-center">
                <h6 class="mb-1">虚位以待</h6>
                <a href="#" class="card-link">0</a> 元
            </div>
        </div>
        <div class="d-flex flex-fill border m-1">
            <div class="icon p-3 text-white bg-warning">
                <i class="fa fa-users" style="font-size:30px"></i>
            </div>
            <div class="mx-3 align-self-center">
                <h6 class="mb-1">虚位以待</h6>
                <a href="#" class="card-link">0</a> 元
            </div>
        </div>
    </div>
    <div class="d-flex" title="自动填充模式">
        <div class="card text-white bg-primary flex-fill mx-1 mb-2">
            <div class="card-body">
                <h5 class="card-title">0</h5>
                <p class="card-text">虚位以待</p>
                <a href="#" class="card-link text-white">详情</a>
            </div>
        </div>
        <div class="card text-white bg-success flex-fill mx-1 mb-2">
            <div class="card-body">
                <h5 class="card-title">0</h5>
                <p class="card-text">虚位以待</p>
                <a href="#" class="card-link">详情</a>
            </div>
        </div>
        <div class="card text-white bg-secondary mx-1 mb-2">
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card text-white bg-dark flex-fill mx-1 mb-2">
            <div class="card-body">
                <h5 class="card-title">0</h5>
                <p class="card-text">虚位以待</p>
                <a href="#" class="card-link">详情</a>
            </div>
        </div>
    </div>
    <div class="d-flex flex-wrap" title="随机尺寸模式">
        <div class="card text-white bg-primary mx-1 mb-2">
            <div class="card-body">
                <h5 class="card-title">虚位以待</h5>
                <p class="card-text">0</p>
                <a href="#" class="card-link text-white">详情</a>
            </div>
        </div>
        <div class="card text-white bg-secondary mx-1 mb-2">
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card text-white bg-success mx-1 mb-2">
            <div class="card-body">
                <h5 class="card-title">虚位以待</h5>
                <p class="card-text">0</p>
                <a href="#" class="card-link">详情</a>
            </div>
        </div>
        <div class="card text-white bg-danger mx-1 mb-2">
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card text-white bg-warning mx-1 mb-2">
            <div class="card-body">
                <h5 class="card-title">虚位以待</h5>
                <p class="card-text">0</p>
                <a href="#" class="card-link">详情</a>
            </div>
        </div>
        <div class="card text-white bg-info mx-1 mb-2">
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card text-white bg-dark mx-1 mb-2">
            <div class="card-body">
                <h5 class="card-title">虚位以待</h5>
                <p class="card-text">0</p>
                <a href="#" class="card-link">详情</a>
            </div>
        </div>
        <div class="card text-white bg-light mx-1 mb-2">
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card text-white bg-primary mx-1 mb-2">
            <div class="card-body">
                <h5 class="card-title">虚位以待</h5>
                <p class="card-text">0</p>
                <a href="#" class="card-link">详情</a>
            </div>
        </div>
        <div class="card text-white bg-secondary mx-1 mb-2">
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>

    <div title="图表演示">
        <div style="width:400px;height:400px;">
            <canvas id="myChart" width="400" height="400"></canvas>
        </div>
    </div>
    <script src="../vendor/chart.js/Chart.min.js"></script>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    </script>
</body>

</html>